<script setup>

import authV2LoginIllustrationBorderedDark from '@images/pages/auth-v2-login-illustration-bordered-dark.png'
import authV2LoginIllustrationBorderedLight from '@images/pages/auth-v2-login-illustration-bordered-light.png'
import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustration-dark.png'
import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png'
import { useRoute, useRouter } from 'vue-router';
import { useConfigStore } from '@/@core/stores/config'


import platform from '@/navigation/platform'
import student from '@/navigation/student'
import teacher from '@/navigation/teacher'
import showTost from "@/components/toast/index.js";
import storage from '@/utils/storage'

import { useAppStore } from '../store/app'
import { storeToRefs } from 'pinia'
const appStore = useAppStore()
const configStore = useConfigStore()
let { navList } = storeToRefs(appStore)

const route = useRoute();
const router = useRouter();
let navType = ref(configStore)
const authThemeImg = useGenerateImageVariant(authV2LoginIllustrationLight, authV2LoginIllustrationDark, authV2LoginIllustrationBorderedLight, authV2LoginIllustrationBorderedDark, true)
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)

definePage({
  meta: {
    layout: 'blank',
    public: true,
  },
})

const refVForm = ref()

const errors = ref({
  email: undefined,
  password: undefined,
})

const form = ref({
  email: '',
  userType:'00',
  password: '',
  remember: false,
})
async function onSubmit() {
  try{
    await refVForm.value?.validate()
    const { data } = await useApi('/login').post({
      username: form.value.email,
      password: form.value.password,
      userType: form.value.userType
    })
    if(data.value.code!=200){
      return showTost(data.value.msg || '登录失败', {duration: 3000, type: "error"})
    }
    const { token } = data.value
    useCookie('accessToken').value = token
    const {data: info} = await useApi('/getInfo').get()
    const {permissions, roles, user} = info.value
    storage.setItem('permissions', permissions)
    storage.setItem('roles', roles)
    storage.setItem('user', user)
    let type = form.value.userType
    navList.value = type == '00' ? platform : type == '01' ? teacher : type = '02' ? student : []
    storage.setItem('nav', navList.value)    
    await nextTick(() => {
      console.log(navList.value, 'before');      
      router.push('/')
    })

  }catch(e) {
    console.log(e, 'errr')
  }
}



const isPasswordVisible = ref(false)


const apexList = [
  {
    title: '平台端',
    value: '00'
  },
  {
    title: '教师端',
    value: '01'
  },
  {
    title: '学生端',
    value: '02'
  }
]
</script>

<template>
  <VRow
    no-gutters
    class="auth-wrapper"
  >
    <VCol
      md="8"
      class="d-none d-md-flex position-relative"
    >
      <div class="logo-box">
        <img src="@/assets/images/logo-single.png" style="width: 50px;" alt="">
        <div class="logo-title">Athena</div>
      </div>
      <div class="bg-box">
      </div>
    </VCol>

    <VCol
      cols="12"
      md="4"
      class="auth-card-v2 d-flex align-center justify-center"
      style="background-color: rgb(var(--v-theme-surface));"
    >
      <VCard
        flat
        :max-width="500"
        class="mt-12 mt-sm-0 pa-4"
      >
        <VCardText>
          <h4 class="text-h4 mb-1">
            欢迎使用 <span class="text-capitalize">Athena!</span> 👋🏻
          </h4>
        </VCardText>
        <VCardText>
          <VForm
            ref="refVForm"
            @submit.prevent="onSubmit"
          >
            <VRow>
              <VCol cols="12">
                <VSelect  v-model="form.userType"
                          :items="apexList"
                          item-title="title"
                          item-value="value"
                          placeholder="请选择性别"
                          label="登录平台"
                >

                </VSelect>
              </VCol>
              <!-- email -->
              <VCol cols="12">
                <VTextField
                  v-model="form.email"
                  label="账号"
                  placeholder="请输入账号"
                  autofocus
                  :rules="[requiredValidator]"
                  :error-messages="errors.email"
                />
              </VCol>

              <!-- password -->
              <VCol cols="12">
                <VTextField
                  v-model="form.password"
                  label="密码"
                  placeholder="请输入密码"
                  :rules="[requiredValidator]"
                  :type="isPasswordVisible ? 'text' : 'password'"
                  :error-messages="errors.password"
                  :append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
                />
                <VBtn
                  style="margin-top: 24px;"
                  block
                  type="submit"
                >
                  Login
                </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>

<style lang="scss">
@use "@core/scss/template/pages/page-auth";

.auth-wrapper {
  background-color: #f4f5fa;
}

.logo-box {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  margin-top:25px;
  margin-left:40px;
}

.logo-title {
  line-height: 50px;
  font-size: 24px;
  color:#000;
}
.bg-box {
  width:100%;
  height:calc(100vh - 75px);
  background-image: url("@/assets/images/login-center-img.png"),url("@/assets/images/Mask.png"),url("@/assets/images/Tree.png");
  background-size: 80% 80%,100% 40%,15% 20%;
  background-position: center center,center bottom,150px 480px;
}
.d-md-flex{
  flex-direction: column;
}
</style>
